<template>
  <div class="layout layout-100">
    <Layout class="layout-100">
      <Header class="header-cont main__title--top">{{this.$route.params.name}}</Header>
      <Content class="content-cont">
        <Tabs value="0" @on-click="tabpaneBtn">
          <TabPane label="待修订" name="0">
          </TabPane>
          <TabPane label="已通过" name="1">
          </TabPane>
        </Tabs>
        <Table
          border
          ref="selection"
          :columns="columns"
          :data="listData"
          @on-selection-change="selectChangeRiado"
          >
          <template slot-scope="{ row, index }" slot="action">
            <span
              title="方案制定"
              class="button-class"
              type="text"
              :style="{color:(row.isName ==1?'#ccc':'#0099ff')}"
              v-if="row.status === 'REJECT'"
              @click="issuePassBtn(row)" >方案制定</span>
            <span
              title="编辑"
              class="button-class"
              type="text"
              v-if="row.status === 'REJECT'"
              @click="editBtn(row)" >编辑</span>
            <span
              title="详情"
              class="button-class"
              type="text"
              @click="destroyBtn(row)" >详情</span>
            <span
              title="删除"
              class="button-class"
              type="text"
              v-if="row.status === 'REJECT'"
              @click="deletelBtn(row)" >删除</span>
          </template>
          <template slot-scope="{ row, index }" slot="status">
            <span style="color: blue" v-if="row.isName == 1 && row.status === 'REJECT'">是</span>
            <span style="color: red" v-if="row.isName != 1  && row.status === 'REJECT'">否</span>
            <span style="color: blue" v-if="row.status !== 'REJECT'">{{row.statusName}}</span>
          </template>
        </Table>
      </Content>
      <Footer class="footer-cont" >
        <Button type="primary" @click="saveSubmit()">保存</Button>
        <Button @click="closetab">取消</Button>
      </Footer>
    </Layout>
    <Modal
      v-model="isPlan"
      :mask-closable="false"
      title="方案制定"
      width="80%"
      class="modal"
      :footer-hide="true">
      <div class="app-content modal-content">
        <revisePlan @isPlanMethods="isPlanMethods" @isPlanObj="isPlanObj" :revise="true" :riskOrderId="riskOrderId"></revisePlan>
      </div>
    </Modal>
    <Modal
      v-model="detailModal2"
      width="75%"
      class="modal"
      :footer-hide="true"
      title="详情">
      <div class="modal-content">
        <Tabs value="0" >
          <TabPane label="风险信息" name="0">
            <Form :show-message="false" label-position="top" >
              <Row >
                <Col span="12">
                  <FormItem label="公司名称">
                    <Input class="width90" v-model.trim="detailData.orgName" readonly/>
                  </FormItem>
                </Col>
                <Col span="12">
                  <FormItem label="项目名称" >
                    <Input class="width90" v-model.trim="detailData.proName" readonly/>
                  </FormItem>
                </Col>
                <Col span="12">
                  <FormItem label="工点名称">
                    <Input class="width90" v-model.trim="detailData.pointName" readonly/>
                  </FormItem>
                </Col>
                <Col span="12">
                  <FormItem label="工点风险等级">
                    <Input class="width90" v-model.trim="detailData.distRiskGradeName"  readonly/>
                  </FormItem>
                </Col>
                <Col span="12">
                  <FormItem label="起始时间">
                    <Input class="width90" v-model.trim="detailData.startTime" readonly/>
                  </FormItem>
                </Col>
                <Col span="12">
                  <FormItem label="结束时间">
                    <Input class="width90" v-model.trim="detailData.endTime" readonly/>
                  </FormItem>
                </Col>
                <Col span="12">
                  <FormItem label="当月是否作业">
                    <Input class="width90" v-model.trim="detailData.isWorkedThisMonth" readonly/>
                  </FormItem>
                </Col>
                <Col span="24">
                  <FormItem label="工点描述">
                    <Input style="width: 95%" type="textarea" v-model.trim="detailData.note" readonly/>
                  </FormItem>
                </Col>
                <Col span="12">
                  <FormItem label="作业风险名称">
                    <Input class="width90" v-model.trim="detailData.riskOperationName"  readonly/>
                  </FormItem>
                </Col>
                <Col span="12">
                  <FormItem label="作业风险类型">
                    <Input class="width90" v-model.trim="detailData.riskCategoryNames" readonly/>
                  </FormItem>
                </Col>
                <Col span="12">
                  <FormItem label="作业风险等级">
                    <Input class="width90" v-model.trim="detailData.riskLevelName" readonly/>
                  </FormItem>
                </Col>
                <Col span="12">
                  <FormItem label="分级方法">
                    <Input class="width90" v-model.trim="detailData.classificationMethodName" readonly/>
                  </FormItem>
                </Col>
                <Col span="24">
                  <FormItem label="具体风险描述">
                    <Input style="width: 95%" type="textarea" v-model.trim="detailData.riskDescription" readonly/>
                  </FormItem>
                </Col>
                <Col span="24">
                  <FormItem label="工程公司管控要求">
                    <Input style="width: 95%" type="textarea" v-model.trim="detailData.riskControlRequirementOne" readonly/>
                  </FormItem>
                </Col>
                <Col span="24">
                  <FormItem label="集团公司管控要求">
                    <Input style="width: 95%" type="textarea" v-model.trim="detailData.riskControlRequirementTwo" readonly/>
                  </FormItem>
                </Col>
                <Col span="24">
                  <FormItem label="目前该风险安全控制情况">
                    <Input style="width: 95%" type="textarea" v-model.trim="detailData.riskControlDetailOne" readonly/>
                  </FormItem>
                </Col>
              </Row>
            </Form>
          </TabPane>
          <TabPane label="方案信息" name="1">
            <Table
              border
              ref="selection"
              :columns="columns2"
              :data="measuresList"
            >
            </Table>
          </TabPane>
          <TabPane label="审核进度" name="2">
            <Timeline>
              <!--<div class="process-recent">{{ processModel.yourMessage }}</div>-->
              <Timeline>
                <TimelineItem
                  color="blue"
                  v-for="(item, index) in recordList"
                  :key="index"
                >
                  <Icon type="ios-radio-button-on" slot="dot" />
                  <div class="process-container">
                    <h4 class="process-title">
                      {{ item.titleName }}：<span
                      :class="'通过' == item.result ? 'audit--success' : 'audit--danger'"
                    >{{ item.result }}</span
                    >
                    </h4>
                    <div class="process-list">
                      <Row
                        :gutter="32"
                        type="flex"
                        v-for="(row, innerIndex) in item.recordList"
                        :key="innerIndex"
                      >
                        <Col :md="8" :lg="5" :xl="4" :xxl="3">
                          <span class="process-name">{{ row.operatorName }}</span>
                          <span class="process-position" v-if="row.operatorPost">
                      （{{ row.operatorPost }}）
                    </span>
                        </Col>
                        <Col>
                          于
                        </Col>
                        <Col>
                          <strong>{{ row.operationTime }}</strong>
                        </Col>
                        <Col>
                          <span v-if="index > 0">进行</span>
                          <strong>{{ row.serviceTypeName }}</strong>
                        </Col>
                        <Col>
                          {{ row.serviceTypeName }}<strong
                          :class="
                        1 == row.operationResult ? 'audit--success' : 'audit--danger'
                      "
                        >{{ row.operationResultName }}</strong
                        >
                        </Col>
                        <Col v-if="index > 0"
                        >并填写说明：<span>{{ row.comment }}</span>
                        </Col>
                      </Row>
                    </div>
                    <div class="process-angle"></div>
                  </div>
                </TimelineItem>
              </Timeline>
            </Timeline>
          </TabPane>
          <TabPane label="问询回复" name="3">
            <replyInquiries v-if="isReply" :editModel="detailData" :businessType="businessType"></replyInquiries>
          </TabPane>
        </Tabs>
      </div>
    </Modal>
    <Modal
      v-model="editModal"
      width="70%"
      class="modal"
      :mask-closable="false"
      title="编辑">
      <div class="app-content modal-content">
        <div class="app-form">
          <Form label-position="top">
            <Row type="flex" justify="space-between">
              <Col span="11">
                <FormItem label="公司名称">
                  <Input  v-model.trim="editData.orgName" disabled/>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="项目名称" >
                  <Input  v-model.trim="editData.proName" disabled/>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-between">
              <Col span="11">
                <FormItem label="工点名称">
                  <Input  v-model.trim="editData.pointName" disabled/>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="工点风险等级">
                  <Input  v-model.trim="editData.distRiskGradeName"  disabled/>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-between">
              <Col span="11">
                <FormItem label="起始时间">
                  <Input  v-model.trim="editData.startTime" disabled/>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="结束时间">
                  <Input  v-model.trim="editData.endTime" disabled/>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-between">
              <Col span="11">
                <FormItem label="是否在施">
                  <Input  v-model.trim="editData.isWorkedThisMonth" disabled/>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-between">
              <Col span="24">
                <FormItem label="工点描述">
                  <Input  type="textarea" v-model.trim="editData.note" disabled/>
                </FormItem>
              </Col>
            </Row>

            <Row type="flex" justify="space-between">
              <Col span="11">
                <FormItem label="作业风险名称">
                  <Input v-model.trim="editData.riskOperationName" disabled />
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="作业风险类别">
                  <Select
                    v-model="editData.riskCategoryIds"
                    multiple
                  >
                    <Option
                      v-for="item in riskCategories"
                      :value="item.id"
                      :key="item.id"
                    >{{ item.riskCategoryName }}</Option
                    >
                  </Select>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-between">
              <Col span="11">
                <FormItem label="作业风险等级">
                  <Select v-model="editData.riskLevel" >
                    <Option
                      v-for="item in riskLevels"
                      :value="item.value"
                      :key="item.value"
                    >{{ item.text }}</Option
                    >
                  </Select>
                </FormItem>
              </Col>

              <Col span="11">
                <FormItem label="分级方法">
                  <Select
                    v-model="editData.classificationMethodId"
                  >
                    <Option
                      v-for="item in methods"
                      :value="item.id"
                      :key="item.id"
                    >{{ item.classificationMethodName }}</Option
                    >
                  </Select>
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span="24">
                <FormItem label="具体风险描述">
                  <Input
                    type="textarea"
                    v-model="editData.riskDescription"
                  />
                </FormItem>
              </Col>
            </Row>
          </Form>
        </div>
      </div>
      <div slot="footer">
        <Button type="text"  @click="editModal=false">取消</Button>
        <Button type="primary" @click="save">保存</Button>
      </div>
    </Modal>
    <Modal v-model="isInquiries" title="业务问询" width="50%" ok-text="提交" :footer-hide="true">
      <div class="modal-content">
        <inquiries ref="isInquiriesBox" :checkedRows="checkedRows" :businessType="businessType" @modelBox="modelBox" @person="person"></inquiries>
      </div>
    </Modal>
    <Modal v-model="personModel" title="选择人" width="80%" ok-text="提交" :footer-hide="true">
      <div class="modal-content">
        <checkPerson @personBox="personBox"></checkPerson>
      </div>
    </Modal>
    <span class="inquiries" @click="replyChild()">问询</span>
  </div>
</template>

<script>
import inquiries from '../../components/modules/inquiries/index'
import checkPerson from '../../components/modules/inquiries/checkPerson'
import replyInquiries from '../../components/modules/inquiries/replyInquiries'
  import { mapMutations } from 'vuex'
  import revisePlan from './subgroup/plan-tab'
  export default {
    components:{
      revisePlan,
      inquiries,
      checkPerson,
      replyInquiries
    },
    name:'monthly-revise',
    data(){
      return {
        checkedRows:[],
        businessType:'businesstype_dynamics',
        isInquiries:false,
        personModel:false,
        isReply:false,
        id:'',
        indexNum:'0',
        isPlan:false,
        editModal:false,
        detailModal2:false,
        type:'',
        editData:{},
        detailData:[],
        recordList:[],
        measuresList:[],
        listData:[],
        passData:[],
        rejectData:[],
        list: [],
        reviseMeasuresDtoList:[],//方案制定
        deletedRiskOrderIdList:[],//删除
        reviseListDtoList:[],
        riskOrderId: '',
        formData:{
          issued:'',
          passed:'',
          rejected:'',
          comment:''
        },
        editModel:{},
        riskCategories: [],
        // 分级方法
        methods: [],
        //风险等级
        riskLevels: [
          { text: 'I级', value: 1 },
          { text: 'II级', value: 2 },
          { text: 'III级', value: 3 },
          { text: 'IV级', value: 4 }
        ],
        columns:[
          {
             type: 'selection',
             width: 60,
             align: 'center'
           },
          {
            title: '序号',
            type: 'index',
            align: 'center',
            width: 70
          },
          {
            title: '工点名称',
            key: 'pointName',
            align: 'center',
            tooltip:true,
          },
          {
            title: '开始时间',
            key: 'startTime',
            align: 'center',
            width: 130,
          },{
            title: '结束时间',
            key: 'endTime',
            align: 'center',
            width: 130,
          },{
            title: '当月是否在施',
            key: 'isWorkedThisMonth',
            align: 'center',
            width: 80,
          },{
            title: '作业风险类型',
            key:'riskCategoryNames',
            align: 'center',
          },{
            title: '作业风险名称',
            key:'riskOperationName',
            align: 'center',
            tooltip:true,
          },{
            title: '作业风险等级',
            key:'riskLevelName',
            align: 'center',
          },{
            title: '方案总数',
            key:'measuresCnt',
            align: 'center',
            width: 70,
          },
          {
            title: '方案是否制定',
            align: 'center',
            width:100,
            slot:'status',
          },
          {
            title: '操作',
            width: 150,
            align: 'center',
            slot: 'action'
          }
        ],
        columns2:[
          {
             type: 'selection',
             width: 60,
             align: 'center'
           },
          {
            title: '序号',
            type: 'index',
            align: 'center',
          },
          {
            title: '管控措施',
            key: 'measures',
            align: 'center',
            width:100,
          },
          {
            title: '项目部管控责任人',
            key: 'projectManagementDepartmentName',
            align: 'center',
          },{
            title: '项目部分管领导',
            key: 'projectManagementLeaderName',
            align: 'center',
          },{
            title: '项目部主管领导',
            key: 'leaderInChargeOfProjectDepartmentName',
            align: 'center',
          },{
            title: '工程公司管理人员',
            key:'controlDepartmentOfEngineeringCompanyName',
            align: 'center',
          },{
            title: '工程公司分管领导',
            key:'leaderInChargeOfEngineeringCompanyName',
            align: 'center',
          },{
            title: '集团公司管理人员',
            key:'groupCompanyControlDepartmentName',
            align: 'center',
          },{
            title: '集团公司分管领导',
            key:'leaderInChargeOfGroupCompanyName',
            align: 'center',
          },{
            title: '措施类型',
            key:'measureTypeName',
            align: 'center',
            width:100,
          },{
            title: '频次',
            key:'frequencyName',
            align: 'center',
          }
        ],
      }
    },
    methods:{
      // 复选框
      selectChangeRiado(e) {
        this.checkedRows = e
      },
      // 唤醒问询窗口
      replyChild(){
        if(this.checkedRows.length > 5){
          this.$Message.warning('最多可选5条风险进行批量问询')
          return 
        }else if(this.checkedRows.length == 0){
            this.$Message.warning('请先选择需要问询的风险')
            return
        }else{
          this.isInquiries = true
          this.$refs.isInquiriesBox.isModel()
        }
      },
      // 关闭问询框
      modelBox(){
        this.isInquiries = false
      },
      // 打开人员选择框
      person(){
        this.personModel = true
      },
      // 关闭人员选择框
      personBox(){
        this.personModel = false
      },
      ...mapMutations([
        'closeTag'
      ]),
      closetab () {
        this.closeTag({
          name: this.$route.name,
          params: {...this.$route.params},
          query:{...this.$route.query}
        });
        this.$router.push({path:'/dynamic-control/monthly-dynamics'});
      },
      getDynamicRiskOrderreviselist(){//信息--列表
        this.$api.MonthlyDynamics.getDynamicRiskOrderreviselist(this.$route.params.id).then(res => {
          if(res.code === 200){
            this.passData = res.data.PASS;
            this.rejectData = res.data.REJECT;
            if(this.passData){
              this.passData.map(val => {
                val.startTime = this.$time(
                  new Date(val.startTime),
                  'yyyy-MM-dd'
                )
                val.endTime = this.$time(
                  new Date(val.endTime),
                  'yyyy-MM-dd'
                )
              })
            }
            if(this.rejectData){
              this.rejectData.map(val => {
                val.startTime = this.$time(
                  new Date(val.startTime),
                  'yyyy-MM-dd'
                )
                val.endTime = this.$time(
                  new Date(val.endTime),
                  'yyyy-MM-dd'
                )
              })
            }
            this.listData = this.rejectData;
          }else {
            this.$Message.warning(res.message)
          }
        })
      },
      getDynamicRiskOrderdetailsecond(row){
        this.$api.MonthlyDynamics.getDynamicRiskOrderdetailsecond(row.riskOrderId).then(res => {
          if(res.code === 200){
            this.isReply = true
            this.detailData = res.data;
            this.detailData.riskCategoryIds = this.detailData.riskCategoryIds
              ? this.detailData.riskCategoryIds.split(',')
              : [];
            this.detailData.startTime = this.$time(
              new Date(this.detailData.startTime),
              'yyyy-MM-dd'
            );
            this.detailData.endTime = this.$time(
              new Date(this.detailData.endTime),
              'yyyy-MM-dd'
            )
            this.measuresList = res.data.measuresList;
            this.recordList = res.data.recordList;
            if(this.recordList){
              this.recordList.map(value => {
                value.operationTime = this.$time(
                  new Date(value.operationTime),
                  'yyyy-MM-dd hh:mm:ss'
                )
              })
            }
          }else {
            this.$Message.warning(res.message)
          }
        })
      },
      destroyBtn(row){//详情
        this.detailModal2 = true;
        this.getDynamicRiskOrderdetailsecond(row)
      },
      getDynamicRiskOrderreviseadmission(){
        if(!this.rejectData || this.rejectData.length<=0){
          this.$Message.warning('没有可修订的内容');
          return;
        }
        if(!this.reviseMeasuresDtoList || this.reviseMeasuresDtoList.length<=0){
          this.$Message.warning('请先方案制定');
          return;
        }
        if(this.rejectData.length > this.reviseMeasuresDtoList.length){
          this.$Message.warning('您还有未方案制定的数据');
          return;
        }
        let params = {
          dynamicRiskOrderListId:this.$route.params.id,
          deletedRiskOrderIdList:this.deletedRiskOrderIdList,
          reviseDetailDtoList:this.reviseMeasuresDtoList,
          reviseListDtoList:this.rejectData
        }
        console.log(params)
        this.$api.MonthlyDynamics.getDynamicRiskOrderreviseadmission(params).then(res => {
          if(res.code === 200){
            this.$Message.success(res.message);
            this.closetab()
          }else {
            this.$Message.warning(res.message)
          }
        })
      },
      saveSubmit(){//保存
        this.getDynamicRiskOrderreviseadmission();
      },
      tabpaneBtn(e){//切换
        this.indexNum = e;
        if(e === '0'){
          this.columns[9].title='方案是否制定';
          this.listData = this.rejectData;
        }else if(e === '1'){
          this.columns[9].title='审核状态';
          this.listData = this.passData;
        }
      },
      issuePassBtn(row){//方案制定
        if(row.isName != 1){
          this.riskOrderId = row.riskOrderId;
          this.isPlan = !this.isPlan
        }
      },

      // 方案制定plan框关闭
      isPlanMethods(str){
        this.isPlan = str
      },
      isPlanObj(obj){
        obj = JSON.parse(obj)//直接obj对象的,push进去的值 会被最后一次push 的值覆盖
        this.listData.map(value => {
          if(value.riskOrderId === obj.riskOrderId){
            this.$set(value,'isName',1);
            this.reviseMeasuresDtoList.push(obj)
          }
        })
      },
      deletelBtn(row){//删除
        this.listData.map((value,index) => {
          if(row.riskOrderId === value.riskOrderId){
            this.listData.splice(index,1);
            this.deletedRiskOrderIdList.push(value.riskOrderId)
          }
        })
      },
      // 获取风险类别
      initRiskCategories() {
        this.$api.measuresLibrary
          .getRiskCategoryFindAll()
          .then(({ code, data }) => {
            if (code === 200) {
              this.riskCategories = data
            }
          })
      },
      //分级方法
      initMethods() {
        this.$api.measuresLibrary
          .getRiskOperationClassificationMethod()
          .then(({ code, data, message }) => {
            if (code === 200) {
              this.methods = data
            } else {
              this.$Message.error(message)
            }
          })
      },
      editBtn(row){//编辑
        this.editModal = true;
        this.editData = row;
        this.editData.riskCategoryIds = this.editData.riskCategoryIds
          ? this.editData.riskCategoryIds.split(',')
          : [];
        //this.getDynamicRiskOrderdetailsecond(row)
      },
      save(){
        this.editModal = false;
        let riskCategoryName =[];
        this.riskCategories.forEach(value => {
          this.editData.riskCategoryIds.forEach(val => {
            if(value.id === val){
              riskCategoryName.push(value.riskCategoryName)
            }
          })
        })
        this.listData.forEach(value => {
          if(value.riskOrderId === this.editData.riskOrderId){
            value.riskCategoryIds = this.editData.riskCategoryIds.toString();
            value.riskCategoryNames = riskCategoryName.toString();
            value.riskLevel = this.editData.riskLevel;
            value.classificationMethodId = this.editData.classificationMethodId;
            value.riskDescription = this.editData.riskDescription;
            if(this.editData.riskLevel ===1){
              value.riskLevelName = 'Ⅰ级';
            }else if(this.editData.riskLevel ===2){
              value.riskLevelName = 'Ⅱ级';
            }else if(this.editData.riskLevel ===3){
              value.riskLevelName = 'Ⅲ级';
            }else if(this.editData.riskLevel ===4){
              value.riskLevelName = 'Ⅳ级';
            }
          }
        })
      },


    },
    mounted() {
      this.getDynamicRiskOrderreviselist();
      this.initRiskCategories();
      this.initMethods();
    }
  };
</script>

<style lang="scss" scoped>
  .button-s {
    margin-bottom: 15px;
    button {
      margin-right: 15px;
    }
  }
  .width90{
    width: 90%;
  }

</style>

